//我是实心的
//上箭头
.arrow-up-solid(@arrow-size,@arrow-color,@left:0,@bottom:0){
  position: relative;
  &:after{
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    .border(transparent,@arrow-size,solid);
    .border-bottom(@arrow-color,@arrow-size,solid);
    left: @left;
    bottom:@bottom;
  }
}
//下箭头
.arrow-down-solid(@arrow-size,@arrow-color,@left:0,@bottom:0){
  position: relative;
  &:after{
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    .border(transparent,@arrow-size,solid);
    .border-top(@arrow-color,@arrow-size,solid);
    left: @left;
    bottom:@bottom;
  }
}
//左箭头
.arrow-left-solid(@arrow-size,@arrow-color,@left:0,@bottom:0){
  position: relative;
  &:after{
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    .border(transparent,@arrow-size,solid);
    .border-right(@arrow-color,@arrow-size,solid);
    left: @left;
    bottom:@bottom;
  }
}
//右箭头
.arrow-right-solid(@arrow-size,@arrow-color,@left:0,@bottom:0){
  position: relative;
  &:after{
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    .border(transparent,@arrow-size,solid);
    .border-left(@arrow-color,@arrow-size,solid);
    left: @left;
    bottom:@bottom;
  }
}
//我是空心的
.arrow-up(@arrow-size:8px,@arrow-color:#ccc,@right:10px){
  position: relative;
  &:after{
    content: "";
    display: block;
    width: @arrow-size;
    height: @arrow-size;

    position: absolute;
    right: @right;
    top: 50%;
    margin-top: -@arrow-size/2;//默认箭头垂直居中

    border-top: 2px solid @arrow-color;
    border-right: 2px solid @arrow-color;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: right center;
    -moz-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
  }
}

.arrow-down(@arrow-size:8px,@arrow-color:#ccc,@right:10px){
  position: relative;
  &:after{
    content: "";
    display: block;
    position: absolute;
    width: @arrow-size;
    height: @arrow-size;
    right: @right;
    top: 50%;
    margin-top: -@arrow-size/2;
    border-top: 2px solid @arrow-color;
    border-right: 2px solid @arrow-color;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
    -webkit-transform-origin: right center;
    -moz-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
  }
}

.arrow-left(@arrow-size:8px,@arrow-color:#ccc,@right:6px){
  position: relative;
  &:after{
    content: "";
    display: block;
    position: absolute;
    width: @arrow-size;
    height: @arrow-size;
    right: @right;
    top: 50%;
    margin-top: -@arrow-size/2;
    border-top: 2px solid @arrow-color;
    border-right: 2px solid @arrow-color;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }
}

.arrow-right(@arrow-size:8px,@arrow-color:#ccc,@right:6px){
  position: relative;
  &:after{
    content: "";
    display: block;
    position: absolute;
    width: @arrow-size;
    height: @arrow-size;
    right: @right;
    top: 50%;
    margin-top: -@arrow-size/2;
    border-top: 2px solid @arrow-color;
    border-right: 2px solid @arrow-color;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
}
